<template>
    <view
        :class="[
            classes,
            checked1
                ? `${bgColorClass} ${bgColorClass
                      .replace('gradual-', '')
                      .replace('light-', '')
                      .replace('bg-', 'solid-')}`
                : 'bg-grey solid-grey',
            colorClass,
            {
                radius: radius,
                round: round,
                solid: checked1 && !bgColorClass,
                disabled: disabled,
                sm: size === 'sm'
            }
        ]"
        :style="[
            styles,
            {
                backgroundColor: checked1 ? bgColorStyle : '',
                borderColor: checked1 ? bgColorStyle : ''
            }
        ]"
        @click="handleClick"
        class="switch border"
    >
        <view class="flex height-p100">
            <view
                :class="[
                    bgColorClass,
                    {
                        radius: radius,
                        round: round
                    }
                ]"
                class="checked flex align-center padding-lr-xs"
                v-show="checked1"
            >
                <uxt-icon
                    v-if="checkedContentIsIcon"
                    :animation="checkedContent.animation"
                    :bg-color="checkedContent.bgColor"
                    :color="checkedContent.color"
                    :hollow="checkedContent.hollow"
                    :radius="checkedContent.radius"
                    :round="checkedContent.round"
                    :type="checkedContent.type"
                ></uxt-icon>
                <block v-else>
                    {{ checkedContent || '' }}
                </block>
            </view>
            <view
                :class="[
                    {
                        radius: radius,
                        round: round
                    }
                ]"
                class="flex-sub bg-white btn"
            ></view>
            <view
                :class="[
                    {
                        radius: radius,
                        round: round
                    }
                ]"
                class="unchecked flex align-center padding-lr-xs"
                v-show="!checked1"
            >
                <uxt-icon
                    v-if="uncheckedContentIsIcon"
                    :animation="uncheckedContent.animation"
                    :bg-color="uncheckedContent.bgColor"
                    :color="uncheckedContent.color"
                    :hollow="uncheckedContent.hollow"
                    :radius="uncheckedContent.radius"
                    :round="uncheckedContent.round"
                    :type="uncheckedContent.type"
                ></uxt-icon>
                <block v-else>
                    {{ uncheckedContent || '' }}
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import baseMixin from '../mixins/base.js'
import rrMixin from '../mixins/rr.js'
import formMixin from '../mixins/form.js'
import uxtIcon from './uxt-icon.vue'

export default {
    name: 'uxt-switch',
    mixins: [baseMixin, rrMixin, formMixin],
    components: {
        uxtIcon
    },
    props: {
        size: {
            type: String,
            default: 'df',
            validator(value) {
                return ['df', 'sm'].includes(value)
            }
        },
        // 用于v-model绑定
        value: {
            type: Boolean,
            default: null
        },
        // 是否选中
        checked: {
            type: Boolean,
            default: false
        },
        // 选中时显示的内容
        checkedContent: {
            type: [String, Object]
        },
        // 非选中时显示的内容
        uncheckedContent: {
            type: [String, Object]
        }
    },
    data() {
        return {
            checked1: this.value !== null ? this.value : this.checked
        }
    },
    computed: {
        checkedContentIsIcon() {
            return typeof this.checkedContent === 'object'
        },
        uncheckedContentIsIcon() {
            return typeof this.uncheckedContent === 'object'
        }
    },
    watch: {
        checked(newVal, oldVal) {
            // v-model时忽略checked
            if (this.value !== null) {
                return
            }
            this.checked1 = newVal
			this.value1 = this.getValue()
        },
        value(newVal, oldVal) {
            this.checked1 = this.value
            this.value1 = this.getValue()
        }
    },
    methods: {
		getValue() {
			return this.checked1
		},
        handleClick() {
            if (!this.disabled) {
                this.checked1 = !this.checked1
                this.$emit('change', { detail: { checked: this.checked1 } })
                this.$emit('input', this.checked1)
            }
        },
		reset(value) {
			if ((value && !this.checked1) || (!value && this.checked1)) {
                this.checked1 = !this.checked1
                this.$emit('change', { detail: { checked: this.checked1 } })
                this.$emit('input', this.checked1)
			}
		}
    }
}
</script>

<style lang="scss" scoped>
.switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 50rpx;
    &:not([class*='solid-'])::before {
        border-color: inherit;
    }
    .checked,
    .btn,
    .unchecked {
        min-width: 50rpx;
    }
    &.sm {
        font-size: 24rpx;
        height: 36rpx;
        .checked,
        .btn,
        .unchecked {
            min-width: 36rpx;
        }
    }
}
</style>
